<template>
  <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center">

      <el-card style="width: 70%;height: 80%;">
        <el-form style="float: right">
            <el-form-item label="日期">
                <el-date-picker @change="load_message" v-model="search_form.reservationTime" placeholder="请选择" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
                <el-button style="margin-left: 50px" @click="load_message" type="success">搜索</el-button>
                <el-button style="margin-left: 10px" @click="reset_search">重置</el-button>
            </el-form-item>
        </el-form>
          <el-table :data="message_arr" style="width: 100%;height: 600px;">
              <el-table-column property="reserveName" label="预留人姓名" align="center"/>
              <el-table-column property="phone" label="手机号" align="center"/>
              <el-table-column :formatter="appStatusFormatter" property="status" label="状态" align="center"/>
              <el-table-column property="remark" label="备注" align="center"/>
              <el-table-column property="reservationTime" label="预约时间" align="center"/>

                  <el-table-column label="操作" align="center">
                      <template #default="scope">
                          <el-button @click="open_dialog_message(scope.row.id)" type="success" style="cursor:pointer" link>详情</el-button>
                      </template>

                  </el-table-column>

          </el-table>
          <el-dialog v-model="dialog_message" title="预约详情" :before-close="message_close">
              <el-form label-position="left" label-width="100px">
                  <el-form-item label="用户名"><el-input v-model="message_detail.username" readonly></el-input></el-form-item>
                  <el-form-item label="预约人姓名"><el-input v-model="message_detail.reserveName" readonly></el-input></el-form-item>
                  <el-form-item label="手机号"><el-input v-model="message_detail.phone" readonly></el-input></el-form-item>
                  <el-form-item label="状态"><el-input v-model="message_detail.status" :formatter="status_input" readonly></el-input></el-form-item>
                  <el-form-item label="备注"><el-input v-model="message_detail.remark" readonly></el-input></el-form-item>
                  <el-form-item label="分店"><el-input v-model="message_detail.branchName" readonly></el-input></el-form-item>
                  <el-form-item label="预约时间"><el-input v-model="message_detail.reservationTime" readonly></el-input></el-form-item>
                  <el-form-item label="就餐人数"><el-input v-model="message_detail.number" readonly></el-input></el-form-item>
                  <el-form-item v-if="message_detail.rejectReason!==null&&message_detail.rejectReason!==''" label="驳回原因"><el-input v-model="message_detail.rejectReason" readonly></el-input></el-form-item>
              </el-form>
              <el-footer @click="message_close"><el-button type="success">关闭</el-button></el-footer>
          </el-dialog>
      </el-card>


  </div>

</template>

<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

//用户
const user = ref(getUser())
//搜索表单
const search_form = ref({reservationTime:'',userId:user.value.id})
//消息数组
const message_arr = ref([])
//对话框
const dialog_message = ref(false)
//详情信息
const message_detail = ref({})
//重置搜索条件
const reset_search = ()=>{
    search_form.value={reservationTime:'',userId:user.value.id}
    load_message()
}
//查看消息
const load_message = ()=>{
    console.log(search_form.value)
    let data = qs.stringify(search_form.value)
    axios.get(BASE_URL+'/v1/reservation/select?'+data)
        .then((response)=>{
            if(response.data.code===2000){
                message_arr.value=response.data.data
            }else{
                ElMessage.error(response.data.msg)
            }
        })
}
//查看详情
const open_dialog_message = (id)=>{
    dialog_message.value=true
    axios.get(BASE_URL+'/v1/reservation/select?id='+id)
        .then((response)=>{
            if(response.data.code===2000){
                message_detail.value=response.data.data[0]


            }else{
                ElMessage.error(response.data.msg)
            }
        })
}
//关闭对话框
const message_close = ()=>{
    if(confirm('确认关闭吗')){
        dialog_message.value=false
        message_detail.value={}
    }
}
onMounted(()=>{
    load_message()
})

const appStatusFormatter = (row, column, cellValue, index) => {
    if(cellValue == 10){
        cellValue = '已发起';
    }else if(cellValue == 20){
        cellValue = '已撤销';
    }else if(cellValue == 30){
        cellValue = '确认中';
    }else if(cellValue == 40){
        cellValue = '驳回';
    }else if(cellValue == 50){
        cellValue = '已审核';
    }else if(cellValue == 60){
        cellValue = '商家确认到店';
    }else if(cellValue == 70){
        cellValue = '顾客确认预约完成';
    }
    return cellValue;
}

const status_input = (value)=>{

        if(value === '10'){
            value = '已发起';
        }else if(value == 20){
            value = '已撤销';
        }else if(value == 30){
            value = '确认中';
        }else if(value == 40){
            value = '驳回';
        }else if(value == 50){
            value = '已审核';
        }else if(value == 60){
            value = '商家确认到店';
        }else if(value == 70){
            value = '顾客确认预约完成';
        }
        return value
}
</script>

<style scoped>

</style>